<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="静态版本的待办事项管理应用" />
    <title>静态版本 - 待办事项管理</title>
    <link rel="stylesheet" href="http://localhost:5173/chap04/tasks/task-styles.css">
  </head>
  <body class="dark-theme">
    <div id="app">
      <div class="container">
        <!-- 应用头部 -->
        <div class="app-header">
          <div class="header-left">
            <h1 class="app-title">你的代办事项</h1>
            <div class="user-greeting">
              <span class="greeting-text">
                报告主人！你还有
                <span class="highlight">3</span>
                个代办事项未完成，有
                <span class="highlight">5</span>
                个已经完成了，有时间的话，赶紧去做吧。
              </span>
            </div>
          </div>
          <div class="header-right">
            <!-- 主题切换器 -->
            <div class="theme-switcher">
              <div class="theme-label">主题</div>
              <div class="theme-options">
                <button 
                  class="theme-btn active"
                  style="background-color: #2d3748"
                  title="深色主题"
                  aria-label="切换到深色主题"
                >
                  🌙
                </button>
                <button 
                  class="theme-btn"
                  style="background-color: #f7fafc"
                  title="浅色主题"
                  aria-label="切换到浅色主题"
                >
                  ☀️
                </button>
                <button 
                  class="theme-btn"
                  style="background-color: #3182ce"
                  title="蓝色主题"
                  aria-label="切换到蓝色主题"
                >
                  🌊
                </button>
                <button 
                  class="theme-btn"
                  style="background-color: #38a169"
                  title="绿色主题"
                  aria-label="切换到绿色主题"
                >
                  🌿
                </button>
              </div>
            </div>
            <div class="user-avatar">
              <svg class="avatar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                />
              </svg>
            </div>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-section">
          <div class="input-group">
            <input
              type="text"
              placeholder="想计划写下来吗？"
              class="task-input"
              aria-label="输入新任务"
              maxlength="100"
            />
            <button 
              class="add-btn"
              aria-label="添加新任务"
            >
              添加
            </button>
          </div>
          <div class="priority-section">
            <div class="priority-options">
              <label class="priority-option">
                <input type="radio" value="重要" name="priority" aria-label="重要优先级" />
                <span class="priority-label">🔴 重要</span>
              </label>
              <label class="priority-option">
                <input type="radio" value="一般" name="priority" checked aria-label="一般优先级" />
                <span class="priority-label">🔵 一般</span>
              </label>
              <label class="priority-option">
                <input type="radio" value="低" name="priority" aria-label="低优先级" />
                <span class="priority-label">⚪ 低</span>
              </label>
            </div>
            <div class="priority-display" aria-live="polite">当前优先级：一般</div>
          </div>
        </div>

        <div class="task-list-header">
          <h3>任务列表</h3>
        </div>

        <!-- 任务列表 -->
        <div class="task-list">
          <!-- 任务项 1 -->
          <div class="task-item completed priority-high" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-重要"
                aria-label="标记为未完成"
                title="点击标记为未完成"
              >
                🔴
              </button>
              <div class="task-info">
                <div class="task-text completed-text">
                  学习前端基础HTML5/CSS3/JavaScript
                </div>
                <div class="task-meta">
                  <span class="task-priority">重要</span>
                  <span class="task-date">2024/1/15</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 学习前端基础HTML5/CSS3/JavaScript"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 学习前端基础HTML5/CSS3/JavaScript"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>

          <!-- 任务项 2 -->
          <div class="task-item priority-high" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-重要"
                aria-label="标记为已完成"
                title="点击标记为已完成"
              >
                🔴
              </button>
              <div class="task-info">
                <div class="task-text">
                  学习Vue.JS的基础知识
                </div>
                <div class="task-meta">
                  <span class="task-priority">重要</span>
                  <span class="task-date">2024/1/14</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 学习Vue.JS的基础知识"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 学习Vue.JS的基础知识"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>

          <!-- 任务项 3 -->
          <div class="task-item completed priority-high" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-重要"
                aria-label="标记为未完成"
                title="点击标记为未完成"
              >
                🔴
              </button>
              <div class="task-info">
                <div class="task-text completed-text">
                  学习前端构建工具
                </div>
                <div class="task-meta">
                  <span class="task-priority">重要</span>
                  <span class="task-date">2024/1/16</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 学习前端构建工具"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 学习前端构建工具"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>

          <!-- 任务项 4 -->
          <div class="task-item priority-high" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-重要"
                aria-label="标记为已完成"
                title="点击标记为已完成"
              >
                🔴
              </button>
              <div class="task-info">
                <div class="task-text">
                  学习前端UI构建
                </div>
                <div class="task-meta">
                  <span class="task-priority">重要</span>
                  <span class="task-date">2024/1/13</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 学习前端UI构建"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 学习前端UI构建"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>

          <!-- 任务项 5 -->
          <div class="task-item completed priority-high" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-重要"
                aria-label="标记为未完成"
                title="点击标记为未完成"
              >
                🔴
              </button>
              <div class="task-info">
                <div class="task-text completed-text">
                  学习前端状态管理
                </div>
                <div class="task-meta">
                  <span class="task-priority">重要</span>
                  <span class="task-date">2024/1/12</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 学习前端状态管理"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 学习前端状态管理"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>

          <!-- 任务项 6 -->
          <div class="task-item completed priority-high" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-重要"
                aria-label="标记为未完成"
                title="点击标记为未完成"
              >
                🔴
              </button>
              <div class="task-info">
                <div class="task-text completed-text">
                  学习前端路由管理
                </div>
                <div class="task-meta">
                  <span class="task-priority">重要</span>
                  <span class="task-date">2024/1/17</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 学习前端路由管理"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 学习前端路由管理"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>

          <!-- 任务项 7 -->
          <div class="task-item" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-低"
                aria-label="标记为已完成"
                title="点击标记为已完成"
              >
                ⚪
              </button>
              <div class="task-info">
                <div class="task-text">
                  学习前端网络管理
                </div>
                <div class="task-meta">
                  <span class="task-priority">低</span>
                  <span class="task-date">2024/1/11</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 学习前端网络管理"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 学习前端网络管理"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>

          <!-- 任务项 8 -->
          <div class="task-item completed priority-high" role="listitem">
            <div class="task-content">
              <button 
                class="task-priority-indicator priority-重要"
                aria-label="标记为未完成"
                title="点击标记为未完成"
              >
                🔴
              </button>
              <div class="task-info">
                <div class="task-text completed-text">
                  综合案例实战
                </div>
                <div class="task-meta">
                  <span class="task-priority">重要</span>
                  <span class="task-date">2024/1/18</span>
                </div>
              </div>
              <div class="task-actions">
                <button 
                  class="action-btn edit-btn"
                  aria-label="编辑任务: 综合案例实战"
                >
                  ✏️ 编辑
                </button>
                <button 
                  class="action-btn delete-btn"
                  aria-label="删除任务: 综合案例实战"
                >
                  🗑️ 删除
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 可选：添加基础的交互功能 -->
    <script>
      // 简单的静态交互功能（可选）
      document.addEventListener('DOMContentLoaded', function() {
        // 主题切换按钮点击效果
        const themeButtons = document.querySelectorAll('.theme-btn');
        themeButtons.forEach(button => {
          button.addEventListener('click', function() {
            themeButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
          });
        });

        // 任务完成状态切换
        const priorityButtons = document.querySelectorAll('.task-priority-indicator');
        priorityButtons.forEach(button => {
          button.addEventListener('click', function() {
            const taskItem = this.closest('.task-item');
            const taskText = taskItem.querySelector('.task-text');
            
            if (taskItem.classList.contains('completed')) {
              taskItem.classList.remove('completed');
              taskText.classList.remove('completed-text');
              this.setAttribute('aria-label', '标记为已完成');
              this.setAttribute('title', '点击标记为已完成');
            } else {
              taskItem.classList.add('completed');
              taskText.classList.add('completed-text');
              this.setAttribute('aria-label', '标记为未完成');
              this.setAttribute('title', '点击标记为未完成');
            }
            
            // 更新统计数字
            updateCounts();
          });
        });

        // 删除任务
        const deleteButtons = document.querySelectorAll('.delete-btn');
        deleteButtons.forEach(button => {
          button.addEventListener('click', function() {
            if (confirm('确定要删除这个任务吗？')) {
              const taskItem = this.closest('.task-item');
              taskItem.remove();
              updateCounts();
            }
          });
        });

        // 更新统计数字
        function updateCounts() {
          const allTasks = document.querySelectorAll('.task-item');
          const completedTasks = document.querySelectorAll('.task-item.completed');
          const pendingTasks = allTasks.length - completedTasks.length;
          
          const highlights = document.querySelectorAll('.highlight');
          if (highlights.length >= 2) {
            highlights[0].textContent = pendingTasks;
            highlights[1].textContent = completedTasks.length;
          }
        }

        // 添加任务功能
        const addButton = document.querySelector('.add-btn');
        const taskInput = document.querySelector('.task-input');
        const priorityInputs = document.querySelectorAll('input[name="priority"]');
        
        function addTask() {
          const taskText = taskInput.value.trim();
          if (taskText === '') return;
          
          const selectedPriority = document.querySelector('input[name="priority"]:checked');
          const priority = selectedPriority ? selectedPriority.value : '一般';
          const priorityIcon = priority === '重要' ? '🔴' : priority === '一般' ? '🔵' : '⚪';
          
          const taskList = document.querySelector('.task-list');
          const newTaskHTML = `
            <div class="task-item ${priority === '重要' ? 'priority-high' : ''}" role="listitem">
              <div class="task-content">
                <button 
                  class="task-priority-indicator priority-${priority}"
                  aria-label="标记为已完成"
                  title="点击标记为已完成"
                >
                  ${priorityIcon}
                </button>
                <div class="task-info">
                  <div class="task-text">
                    ${taskText}
                  </div>
                  <div class="task-meta">
                    <span class="task-priority">${priority}</span>
                    <span class="task-date">${new Date().toLocaleDateString('zh-CN')}</span>
                  </div>
                </div>
                <div class="task-actions">
                  <button 
                    class="action-btn edit-btn"
                    aria-label="编辑任务: ${taskText}"
                  >
                    ✏️ 编辑
                  </button>
                  <button 
                    class="action-btn delete-btn"
                    aria-label="删除任务: ${taskText}"
                  >
                    🗑️ 删除
                  </button>
                </div>
              </div>
            </div>
          `;
          
          taskList.insertAdjacentHTML('beforeend', newTaskHTML);
          taskInput.value = '';
          
          // 重新绑定事件
          bindTaskEvents();
          updateCounts();
        }
        
        function bindTaskEvents() {
          // 重新绑定任务完成状态切换
          const newPriorityButtons = document.querySelectorAll('.task-priority-indicator');
          newPriorityButtons.forEach(button => {
            button.removeEventListener('click', toggleTask);
            button.addEventListener('click', toggleTask);
          });
          
          // 重新绑定删除按钮
          const newDeleteButtons = document.querySelectorAll('.delete-btn');
          newDeleteButtons.forEach(button => {
            button.removeEventListener('click', deleteTask);
            button.addEventListener('click', deleteTask);
          });
        }
        
        function toggleTask(e) {
          const taskItem = e.target.closest('.task-item');
          const taskText = taskItem.querySelector('.task-text');
          
          if (taskItem.classList.contains('completed')) {
            taskItem.classList.remove('completed');
            taskText.classList.remove('completed-text');
            e.target.setAttribute('aria-label', '标记为已完成');
            e.target.setAttribute('title', '点击标记为已完成');
          } else {
            taskItem.classList.add('completed');
            taskText.classList.add('completed-text');
            e.target.setAttribute('aria-label', '标记为未完成');
            e.target.setAttribute('title', '点击标记为未完成');
          }
          
          updateCounts();
        }
        
        function deleteTask(e) {
          if (confirm('确定要删除这个任务吗？')) {
            const taskItem = e.target.closest('.task-item');
            taskItem.remove();
            updateCounts();
          }
        }
        
        addButton.addEventListener('click', addTask);
        taskInput.addEventListener('keyup', function(e) {
          if (e.key === 'Enter') {
            addTask();
          }
        });
      });
    </script>
  </body>
</html>